<template>
  <div class="fs">
      <div v-if="OBJ">
          <div>
              {{OBJ.A}}
          </div>
          <div v-if="OBJ.B">
              <div>{{OBJ.C}}</div>
              <div>{{OBJ.B}}</div>
          </div>
      </div>
  </div>
</template>
<script>
export default {
  props: ["decimals"],
  methods: {
      /**
       * 小数转分数，只保留一位小数
       * @param decimals 多位小数
       */
    decimalsToFractional(decimals) {
      if (typeof(decimals) === "number") {
        // 1位小数转分数
        let a = 0,
          c = 0;
        // 保留一位小数
        c = parseInt(decimals * 10) / 10;
        if ( c % 1 === 0 ) {
          return { A: c };
        } else if (c > 1) {
          const d = c % 1;
          const s = parseInt(c); //整数
          a = Math.round(d * 10) / 10; //小数
          const obj = Fraction(a * 10, 10);
          return { A: s, ...obj };
        } else  {
          const obj = Fraction(c * 10, 10);
          return { ...obj };
        }
      } else {
        return "";
      }
      /**
       * 计算分数
       * @param num1 分子
       * @param num2 分母
       */
      function Fraction(num1, num2) {
        let e = 0,
          gcd = function (a, b) {
            return b == 0 ? a : gcd(b, a % b);
          }; //欧几里德算法
        e = gcd(num1, num2);
        num1 /= e;
        num2 /= e;
        return { C: num1, B: num2 };
      }
    }
  },
  computed: {
    OBJ() {
      return this.decimalsToFractional(this.decimals);
    },
  },
};
</script>
<style scoped>
.fs{
    display: flex;
    justify-content: center;
}
.fs > div{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}
.fs > div>div:first-child{
    font-size: 16px;
    padding: 0 2px 0 0;
}
.fs > div>div:last-child{
    font-size: 13px;
    width: 15px;
}
.fs > div>div:last-child>div:first-child{
    border-bottom: solid 1px white;
}
</style>